<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>

    <title>Products Archive</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" href="css/slick-1.6.0/slick.css" />

    <link rel="stylesheet" href="css/jquery.fancybox.css" />
    <link rel="stylesheet" href="css/yith-woocommerce-compare/colorbox.css" />
    <link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css" />
    <link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css" />
    <link rel="stylesheet" href="css/js_composer/js_composer.min.css" />
    <link rel="stylesheet" href="css/woocommerce/woocommerce.css" />
    <link rel="stylesheet" href="css/yith-woocommerce-wishlist/style.css" />
    <link rel="stylesheet" href="css/custom.css" />
    <link rel="stylesheet" href="css/app-orange.css" id="theme_color" />
    <link rel="stylesheet" href="" id="rtl" />
    <link rel="stylesheet" href="css/app-responsive.css" />
</head>
<body class="archive post-type-archive woocommerce post-type-archive-product">
<div class="body-wrapper theme-clearfix" >
    <header id="header" class="header header-style1">
        <div class="header-mid clearfix">
            <div class="container">
                <div class="rows">
                    <!-- 右上LOGO -->
                    <div class="etrostore-logo pull-left">
                        <br>
                        <br>
                        <h1 style="color:orange">CABBAGE</h1>
                        <H4 style="color:rgb(189, 189, 189)">Your Online Bookstore</H4>
                    </div>
                    <!-- /右上LOGO -->
                </div>
            </div>
        </div>
    </header>
    <div class="container" id="app">
        <div class="modal-dialog block-popup-login">
            <div class="tt_popup_login">
                <strong>登录/注册</strong>
            </div>
            <form action="" method="post" class="login">
                <div class="block-content">
                    <div class="col-reg registered-account">
                        <div class="email-input">
                            <input v-model="user.userName" type="text" class="form-control input-text username" name="userName" id="userName" placeholder="Username" />
                        </div>
                        <div class="pass-input">
                            <input v-model="user.password" class="form-control input-text password" type="password" placeholder="Password" name="password" id="password" />
                        </div>
                        <div class="email-input">
                            <input v-model="user.email" type="email" class="form-control input-text username" name="email" id="email" placeholder="email" />
                        </div>
                        <div class="pass-input">
                            <input v-model="user.phone" class="form-control input-text password" type="text" placeholder="telephone" name="phone" id="phone" />
                        </div>
                        <br/>
                        <div class="actions">
                            <div class="submit-login">
                                <button type="button" @click="SaveUser" class="button btn-submit-login">注册</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-reg login-customer">
                        <h2>还未注册账户?</h2>
                        <p class="note-reg">注册非常简单</p>
                        <ul class="list-log">
                            <li>输入你想要的用户名和密码 <br/>点击注册</li>
                        </ul>
                        <button  class="btn-reg-popup">欢迎新用户</button>
                    </div>
                </div>
            </form>
            <div class="clear"></div>  <!--悬浮对话框底色为白色，可见-->
        </div>
    </div>

    <footer id="footer" class="footer default theme-clearfix">
        <div class="footer-copyright style1">
            <div class="container">
                <!-- Copyright text -->
                <div class="copyright-text">
                    <center><p>Copyright &copy; 2022.Company name All rights reserved.cabbage</p></center>
                </div>
            </div>
        </div>
    </footer>
    <!-- /Copyright text -->
</div>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery/js.cookie.min.js"></script>
<!-- OPEN LIBS JS -->
<script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/slick-1.6.0/slick.min.js"></script>
<script type="text/javascript">
    /* <![CDATA[ */
    var woocommerce_price_slider_params = {"currency_symbol":"$","currency_pos":"left","min_price":"100","max_price":"500"};
    /* ]]> */
</script>
<script type="text/javascript" src="js/widget.min.js"></script>
<script type="text/javascript" src="js/mouse.min.js"></script>
<script type="text/javascript" src="js/slider.min.js"></script>
<script type="text/javascript" src="js/js_composer/js_composer_front.min.js"></script>
<script type="text/javascript" src="js/yith-woocommerce-compare/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/sw_core/isotope.js"></script>
<script type="text/javascript" src="js/sw_core/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/sw_woocommerce/category-ajax.js"></script>
<script type="text/javascript" src="js/sw_woocommerce/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/woocommerce/price-slider.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/megamenu.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            SaveUser:function(){
                axios.post('/user/register',this.user)
                    .then(function (response) {
                        console.log(response.data)
                        alert(response.data.message);
                        location.href="login.html"
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }
        }
    })
</script>